<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" :checked="isAll" @input="allChecked"/> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in goodList" :key="index">
          <td><input type="checkbox" :checked="item.checked" @input="goodChecked($event, index)"/></td>
          <td>{{ item.name }}</td>
          <td>{{ item.price}}</td>
          <td><button @click="numPush(-1, index)">-</button>{{ item.num }}<button @click="numPush(1, index)">+</button></td>
          <td>{{ item.price * item.num}}</td>
          <td><button @click="delGood(item.name)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">{{totalPrice}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['goodList']),
    ...mapGetters(['totalPrice', 'isAll'])
  },
  methods: {
    ...mapMutations(['numUpdate']),
    numPush (val, index) {
      const newNum = this.goodList[index].num + val
      this.numUpdate({
        number: newNum,
        index
      })
    },
    goodChecked (event, index) {
      // console.log(event.target.checked)
      this.$store.commit('goodChecked', {
        index: index,
        val: event.target.checked
      })
    },
    allChecked (event) {
      this.$store.commit('allChecked', event.target.checked)
    },
    delGood (name) {
      this.$store.commit('delGood', name)
    }
  }
}
</script>

<style></style>
